<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绘制地图</title>

    <link rel="stylesheet" href="./leaflet/leaflet.css" />
    <script src="./leaflet/leaflet.js"></script>

  </head>
  <body>
    <div id="map" style="width: 100%; height: 98vh"></div>
    <div> ok 呀</div>
    <div> okk 呀</div>

    <script>
      const mapOptions = {
        center: [31.421306, 120.64589], //位置
        zoom: 12, //初始缩放等级
        zoomControl: false
      }
      let map = new L.map('map', mapOptions)
      L.tileLayer(
        // 'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
        'http://tileserver.memomaps.de/tilegen/{z}/{x}/{y}.png',
        {
          attribution: '绘制地图' // 自定义版权标识
        }
      ).addTo(map)
      L.marker([31.423406, 120.64]).addTo(map)

      // 绘制点回调事件
      let marker
      function pointClick(e) {
        if (marker) {
          map.removeLayer(marker)
        }
        const circleOption = {
          icon: L.icon({
            iconUrl: './images/weizhi.png', //icon地址
            iconSize: [50, 55], //icon大小
            iconAnchor: [25, 36] //图标位置
          })
        }
        marker = L.marker(e.latlng, circleOption).addTo(map)
      }
      // 绘制点
      // map.on('click', pointClick)

      // 绘制线回调事件
      let points = []
      let lines = new L.polyline(points) //折线
      let tempLines = new L.polyline([]) //空折线
      // 点击绘制
      function onClickLine(e) {
        points.push([e.latlng.lat, e.latlng.lng])
        lines.addLatLng(e.latlng) //将点添加到多段线
        map.addLayer(lines)
        map.addLayer(
          L.circle(e.latlng, {
            color: 'blue',
            fillColor: 'ff0000',
            fillOpacity: 1
          })
        )
      }
      // 拖曳线条
      function onMoveLine(e) {
        if (points.length > 0) {
          ls = [points[points.length - 1], [e.latlng.lat, e.latlng.lng]] //最后一个点位置和鼠标位置
          tempLines.setLatLngs(ls) //将折线中的所有点替换为拖曳位置
          map.addLayer(tempLines)
        }
      }
      // 双击结束
      function onDoubleClickLine(e) {
        L.polyline(points).addTo(map)
        points = []
        // lines = new L.polyline(points)
        map.off('mousemove') //解绑事件
        map.off('click')

      }
      // 绘制线
      // map.on('click', onClickLine) //点击地图
      // map.on('mousemove', onMoveLine) //拖曳
      // map.on('dblclick', onDoubleClickLine) //双击地图

      // 绘制区域回调事件
      let pointss = []
      let liness = new L.polyline(points) //折线
      let tempLiness = new L.polyline([]) //空折线
      // 点击绘制
      function onClickGon(e) {
        pointss.push([e.latlng.lat, e.latlng.lng])
        liness.addLatLng(e.latlng) //将点添加到多段线
        map.addLayer(liness)
        map.addLayer(
          L.circle(e.latlng, {
            color: 'blue',
            fillColor: 'ff0000',
            fillOpacity: 1
          })
        )
      }
      // 拖曳线条
      function onMoveGon(e) {
        if (pointss.length > 0) {
          ls = [pointss[pointss.length - 1], [e.latlng.lat, e.latlng.lng]] //最后一个点位置和鼠标位置
          tempLiness.setLatLngs(ls) //将折线中的所有点替换为拖曳位置
          map.addLayer(tempLiness)
        }
      }
      // 双击结束
      function onDoubleClickGon(e) {
        L.polygon(pointss, {
          colorcolor: 'blue',
          fillColor: '#3388ff',
          fillOpacity: 0.6,
        }).addTo(map)
        pointss = []
        map.off('mousemove') //解绑事件
        map.off('click')
      }
      // 绘制图形
      map.on('click', onClickGon) //点击地图
      map.on('mousemove', onMoveGon) //拖曳
      map.on('dblclick', onDoubleClickGon) //双击地图
    </script>
  </body>
</html>
